{% stylesheet %}
.block_twitter .block_title {
    margin-bottom: 0;
}

.block_twitter .twitter_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block_twitter .twitter_left {
    width: calc(100% - 500px);
    padding: 0 100px 0 0;
    box-sizing: border-box;
}

.block_twitter .twitter_right {
    width: 500px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
}

.block_twitter .twitter_content_style {
    flex-direction: row-reverse;
}

.block_twitter .twitter_content_style .twitter_left {
    padding: 0 0 0 100px;
}

@media (max-width: 768px) {

    .block_twitter .twitter_content_style,
    .block_twitter .twitter_content {
        flex-direction: column;
    }

    .block_twitter .twitter_content_style .twitter_left,
    .block_twitter .twitter_left {
        padding: 0;
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .block_twitter .twitter_right {
        width: 100%;
        /* min-height: 300px !important; */
    }

}
{% endstylesheet %}
<div class="block_twitter">
    <div class="container_wrapper">
        <div class="twitter_content {% if section.settings.position == '2' %}twitter_content_style{% endif %}">
            <div class="twitter_left">
                {% if section.settings.title != '' or section.settings.detail != '' %}
                <div class="block_title">
                    {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
                    {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
                </div>
                {% endif %}
            </div>
            <div class="twitter_right" style="min-height:{% if section.settings.height %} {{ section.settings.height }}{% else %}500{% endif %}px;">
                
                <a class="twitter-timeline" data-width="100%" data-height="{% if section.settings.height %} {{ section.settings.height }}{% else %}500{% endif %}"  href="https://twitter.com/{{ section.settings.account }}"></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            
            </div>
        </div>
    </div>
</div>

{% schema %}
{
  "tag": "section",
  "class": "block_twitter",
  "is_global": false,
  "name": {
    "zh_CN": "Twitter"
  },
  "max_blocks": "0",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "placeholder": {
        "zh_CN": "请输入标题"
      },
      "default": "Twitter"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述"
      },
      "placeholder": {
        "zh_CN": "请输入描述"
      },
      "default": "Embedded timelines are an easy way to embed Tweets on your website in a compact, linear view. Display the latest Tweets from a Twitter account, lists, or your curated collections."
    },
    {
      "type": "card_input",
      "id": "account",
      "label": {
        "zh_CN": "账号"
      },
      "placeholder": {
        "zh_CN": "请输入账号,如XXXXX"
      },
      "info":{
        "zh_CN": "Twitter账号，例如: https://twitter.com/XXXXX"
      }
    },
    {
      "type": "card_input",
      "id": "height",
      "label": {
        "zh_CN": "高度"
      },
      "default": "500"
    },
    {
      "type": "card_select",
      "id": "position",
      "label": {
        "zh_CN": "描述位置"
      },
      "option": [
        {
          "label": {
            "zh_CN": "居左"
          },
          "value": "1"
        },
        {
          "label": {
            "zh_CN": "居右"
          },
          "value": "2"
        }
      ],
      "default": "1"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "title": "Twitter",
      "detail": "Embedded timelines are an easy way to embed Tweets on your website in a compact, linear view. Display the latest Tweets from a Twitter account, lists, or your curated collections.",
      "account": "",
      "height": "500",
      "position": "1"
    },
    "blocks": []
  }
}
{% endschema %}